<template>
  <div class="div">
    <PageTitle title="内容中心" addUrl="/goodsAdd"></PageTitle>
    <el-table stripe :data="tableData">
      <!-- <el-table-column
        prop="goods_name"
        label="内容名称">
      </el-table-column>-->
      <!--      <el-table-column-->
      <!--        prop="price"-->
      <!--        label="商品价格(元)">-->
      <!--      </el-table-column>-->
      <el-table-column label="内容封面">
        <template slot-scope="scope">
          <img
            v-if="!scope.row.url.endsWith('mp4')"
            :src="scope.row.url"
            @click="handlePictureCardPreview(scope.row.url)"
            class="list-img"
          />
          <a v-else :href="scope.row.url" target="_blank">
            <video :src="scope.row.url"></video>
          </a>
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="company"
        label="所属公司">
      </el-table-column>-->
      <el-table-column prop="fication_name" label="品牌"></el-table-column>
      <!--      <el-table-column-->
      <!--        prop="describe"-->
      <!--        label="商品描述">-->
      <!--      </el-table-column>-->
      <!--      <el-table-column-->
      <!--        label="商品库存">-->
      <!--          <template slot-scope="scope">-->
      <!--            {{ scope.row.stock }}个-->
      <!--          </template>-->
      <!--      </el-table-column>-->
      <!--      <el-table-column-->
      <!--        label="状态"-->
      <!--      >-->
      <!--        <template slot-scope="scope">-->
      <!--          <span v-if="scope.row.state === '0'" class="color-success">上架</span>-->
      <!--          <span v-else class="color-danger">下架</span>-->
      <!--        </template>-->
      <!--      </el-table-column>-->l
      <el-table-column prop="trial" label="状态">
        <template slot-scope="scope">{{scope.row.trial ==1?'审核中':'审核通过'}}</template>
      </el-table-column>
      <el-table-column label="操作" width="140">
        <template slot-scope="scope">
          <router-link
            :to="{name: 'GoodsAdd', params: {id: scope.row.id, url:  scope.row.url }}"
            class="color-theme margin-right"
          >查看</router-link>
          <!--         <el-button type="text" @click="change(scope.row.url,scope.row.id)">修改</el-button>-->
          <el-button type="text" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-wrapper">
      <el-pagination
        layout="prev, pager, next"
        @current-change="pageChange"
        :page-size="pageSize"
        :total="totalCount"
        :current-page="pageNum"
      ></el-pagination>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" />
    </el-dialog>
  </div>
</template>

<script>
import PageTitle from "@/components/pageTitle/PageTitle.vue";
// import _ from 'lodash'
export default {
  name: "GoodsList",
  components: {
    PageTitle
  },
  activated() {
    this._getList();
  },
  data() {
    return {
      tableData: [],
      pageNum: 1,
      totalCount: 0,
      pageSize: 10,
      status: "0", //  筛选参数
      search: "", //搜索参数
      dialogImageUrl: "",
      dialogVisible: false
    };
  },
  methods: {
    async _getList() {
      let {
        data: { data, code }
      } = await this.$axios({
        url: this.$api + "/v1/goods/repair",
        method: "GET",
        params: {
          size: this.pageSize,
          current: this.pageNum,
          state: this.status,
          title: this.search
        }
      });
      if (code == 0) {
        this.tableData = data.items;
        this.totalCount = data.page.totalCount;
      }
    },
    goto(id) {
      this.$axios({
        // url: this.$api + '/v1/goods/strike',
        url: this.$api + "/goodsList/detailed/",
        method: "POST",
        data: {
          id
        }
      });
    },
    del(id) {
      this.$confirm("确认删除吗？", "提示", {
        type: "warning"
      }).then(() => {
        this._del(id);
      });
    },
    change(cid, id) {
      this.$axios({
        url: this.$api + "/v1/goodsList/within",
        method: "POST",
        data: {
          cid,
          id
        }
      });
    },
    async _del(id) {
      let {
        data: { code, data }
      } = await this.$axios({
        // url: this.$api + '/v1/goods/strike',
        url: this.$api + "/v1/goods/except",
        method: "POST",
        data: {
          id
        }
      });
      if (code == 0) {
        this.$message.success(data);
        this._getList();
      }
    },
    changeState(id, state) {
      this.$confirm("确认变更状态吗？", "提示", {
        type: "warning"
      }).then(() => {
        this._changeState(id, state);
      });
    },
    async _changeState(id, state) {
      let {
        data: { data, code }
      } = await this.$axios({
        url: this.$api + "/v1/goods/up",
        method: "POST",
        data: {
          id,
          state
        }
      });
      if (code === 0) {
        this.$message.success(data);
        this._getList();
      }
    },
    handleClick(s) {
      this.status = s;
      this.pageNum = 1;
      this._getList();
    },
    // handleSearch() {
    //   this.pageNum = 1
    //   this._getList()
    // },
    pageChange(pageNum) {
      this.pageNum = pageNum;
      this._getList();
    },
    handlePictureCardPreview(src) {
      this.dialogImageUrl = src;
      this.dialogVisible = true;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/select-bar.scss";
.list-img,
video {
  width: 80%;
  height: 60px;
  cursor: pointer;
}
.el-button--text {
  text-decoration: none;
}
</style>